<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
	href="jquery/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/loginIn.css">	
<link rel="stylesheet" type="text/css" href="jquery/themes/icon.css">
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery/easyui-lang-zh_CN.js"></script>
<style>
body {
	background-color: #F0FFFF;
}

table {
	height: 120px;
	margin: auto;
	padding-top: 8px;
}

table tr {
	font-size: 12px;
	font-family: "微软雅黑";
}

table tr #td1 {
	text-align: left;
	font-size: 15px;
}

input {
	border-radius: 5px;
	width: 200px;
	height: 25px;
}

#input1 {
	font-size: 18px;
	width: 80px;
	height: 35px;
	color: white;
	background-color: darkslateblue;
	margin-left: 130px;
	margin-top: 15px;
}

#input2 {
	font-size: 18px;
	width: 80px;
	height: 35px;
	color: white;
	background-color: darkslateblue;
	margin-left: 30px;
	margin-top: 15px;
}

a {
	font-size: 10px;
	font-family: "黑体";
	color: black;
	text-decoration: inherit;
}
/*..................background-color: mediumspringgreen................*/
#canvas {
	float: right;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 5px;
	cursor: pointer;
	text-align: left;
}

.input-val {
	width: 80px;
	background: #ffffff;
	height: 30px;
	padding: 0 2%;
	border-radius: 5px;
	border: none;
	border: 1px solid rgba(0, 0, 0, .2);
	font-size: 1.0625rem;
}
</style>
<script type="text/javascript">
	if (window.history && window.history.pushState) {
	$(window).on('popstate', function() {
		window.history.pushState('forward', null, '');
		window.history.forward(1);
	});
}
	window.history.pushState('forward', null, '');
	window.history.forward(1);
	$(function() {	
		 var show_num = [];
		    draw(show_num);

		    $("#canvas").on('click',function(){
		        draw(show_num);
		    })
		$("#input1").click(				
				function(){
					$('#login-form').form({   
					    url:'login',   
					    onSubmit: function(){   
					       return $('#login-form').form('validate');
					    },   
					    success:function(flag){ 
					    	 var val = $(".input-val").val().toLowerCase();
					          var num = show_num.join("");
					          if(flag=='0'){
					        	  alert('用户邮箱输入不正确');
					          } else if(flag=='-1'){
					        	  alert('用户账号输入不正确');
					          }else if(val==''){
					              alert('请输入验证码！');
					          } else if(val != num){
					        	  alert('验证码错误！请重新输入！');
					              $(".input-val").val('');
					              draw(show_num);
					          }
					          else if(flag=='1'){
					        	  window.location.href='index.jsp';
					          }					       					        
					    }  
					    
					});				
		     })
		     
}) 
/*.........................................................................*/
function draw(show_num) {
    var canvas_width=$('#canvas').width();
    var canvas_height=$('#canvas').height();
    var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
    var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
    canvas.width = canvas_width;
    canvas.height = canvas_height;
    var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
    var aCode = sCode.split(",");
    var aLength = aCode.length;//获取到数组的长度
    
    for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
        var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
        var txt = aCode[j];//得到随机的一个内容
        show_num[i] = txt.toLowerCase();
        var x = 10 + i * 20;//文字在canvas上的x坐标
        var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
    }
    for (var i = 0; i <= 5; i++) { //验证码上显示线条
        context.strokeStyle = randomColor();
        context.beginPath();
        context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.stroke();
    }
    for (var i = 0; i <= 30; i++) { //验证码上显示小点
        context.strokeStyle = randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
    }
}

function randomColor() {//得到随机的颜色值
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}
</script>
<title>login.jsp</title>
</head>
<body>
	<img src="">
	<div id="login-dialog" class="easyui-dialog" title="用户登录"
		data-options="modal:true,closable:false"
		style="width: 30%; height: 250px; font-size: 20px;">
		<form id="login-form" method="post">
			<table>
				<tr id="tr">
					<td id="td1">邮箱：</td>
					<td><input type="text" class="easyui-validatebox" name="email"
						data-options="required:true" /></td>
				</tr>
				<tr id="tr">
					<td id="td1">密码：</td>
					<td><input type="password" class="easyui-validatebox"
						name="account" data-options="required:true" /></td>
				</tr>
				<tr id="tr">
					<td id="td1">验证码：</td>
					<td><input type="text" name="code" placeholder="请输入验证码"
						class="input-val" />
						<canvas id="canvas" width="100" height="30"></canvas></td>
				</tr>
			</table>
			<input id="input1" type="submit" value="登&nbsp;录" /> <input
				id="input2" type="reset" value="重&nbsp;置" /> <a href="1.html">&nbsp;&nbsp;忘记密码？</a>
		</form>
	</div>

</body>
</html>